<!--
 * Description: Login密码修改
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/07/22 10:07
-->

<template>
  <div v-loading="isRequesting">
    <!--数据表单-->
    <el-form label-width="120px" :model="formData" size="mini">
      <el-row>
        <!--旧密码-->
        <el-form-item :label="$t('ChangePwd.oldPassword')">
          <el-input
            v-model="formData.oldPassword"
            v-blur:oldPassword="formData"
            clearable
            type="password"
          />
        </el-form-item>
        <!--新密码-->
        <el-form-item :label="$t('ChangePwd.newPassword')">
          <el-input v-model="formData.newPassword" clearable show-password type="password" />
        </el-form-item>
        <!--确认新密码-->
        <el-form-item :label="$t('ChangePwd.confirmNewPassword')">
          <el-input v-model="formData.confirmNewPassword" clearable show-password type="password" />
        </el-form-item>
        <!-- 提示信息 -->
        <el-form-item>
          <el-alert
            :closable="false"
            show-icon
            :title="$t('ChangePwd.tips')"
            type="warning"
          ></el-alert>
        </el-form-item>
      </el-row>
    </el-form>
    <span style="display: block;text-align: center;margin-top: 5px">
      <!--取消按钮-->
      <el-button size="medium" @click="cancel">{{ $t('button.cancel') }}</el-button>
      <!--保存按钮-->
      <el-button size="medium" type="primary" @click="save">{{ $t('button.save') }}</el-button>
    </span>
  </div>
</template>
<script>
import { userChangePassword } from '@/api/sys/user'

export default {
  name: 'LoginPwdEdit',
  props: {
    sessionId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isRequesting: false,
      formData: {
        oldPassword: '',
        newPassword: '',
        confirmNewPassword: ''
      }
    }
  },
  methods: {
    cancel() {
      this.$emit('cancel')
    },
    async save() {
      try {
        const oldPassword = this.formData.oldPassword
        const newPassword = this.formData.newPassword
        const confirmNewPassword = this.formData.confirmNewPassword
        if (oldPassword && newPassword && confirmNewPassword) {
          if (newPassword !== confirmNewPassword) {
            return this.$message({
              message: this.$t('Login.pwdIsConsistent'),
              type: 'error',
              duration: 1500
            })
          }
          if (oldPassword === newPassword) {
            return this.$message({
              message: this.$t('Login.pwdNotConsistent'),
              type: 'error',
              duration: 1500
            })
          }
        } else {
          return this.$message({
            message: this.$t('Login.fillComplete'),
            type: 'error',
            duration: 1500
          })
        }
        this.isRequesting = true
        await userChangePassword(this.formData, {
          sessionId: this.sessionId,
          msgSuccess: true,
          msgError: true
        })
        this.$emit('save')
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    }
  }
}
</script>
